<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <div class="layout-padding-auto layout-padding-view">
        <!--查询条件表单-->
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
          <el-form-item :label="$t('finish.barcode')" prop="barcode">
            <el-input v-model="state.queryForm.barcode" clearable :placeholder="$t('finish.printbarcode')"/>
          </el-form-item>

          <el-form-item :label="$t('finish.socode')" prop="socode">
            <el-input v-model="state.queryForm.socode" clearable :placeholder="$t('finish.printso')"/>
          </el-form-item>

          <el-form-item :label="$t('finish.locationcode')" prop="locationcode">
            <el-input v-model="state.queryForm.locationcode" clearable :placeholder="$t('finish.outlocation')"/>
          </el-form-item>

          <el-form-item :label="$t('finish.sendoutdate')" prop="sendoutdate">
            <div class="block">
              <el-date-picker
                  v-model="sendoutdate"
                  :clearable="false"
                  type="daterange"
                  unlink-panels
                  range-separator="To"
                  start-placeholder="Start date"
                  end-placeholder="End date"
                  :shortcuts="shortcuts"
              />
            </div>
          </el-form-item>

					<el-form-item>
						<el-button icon="el-icon-search" type="primary"  @click="query">{{ $t('finish.query') }}</el-button>
						<el-button icon="refresh" @click="resetQuery">{{$t('finish.reset')}}</el-button>
					</el-form-item>
				</el-form>

        <!--数据表格-->
        <el-table
            :data="state.dataList"
            highlight-current-row
            v-loading="state.loading"
            border
            fit
            style="width: 100%; height: 100%"
            :cell-style="tableStyle.cellStyle"
            stripe
            :header-cell-style="tableStyle.headerCellStyle">

					<el-table-column type="index" fixed="left"  label="#" width="80" />
					<el-table-column prop="socode" :label="$t('finish.socode')" fixed="left"  show-overflow-tooltip width="220"/>
					<el-table-column prop="soLine" :label="$t('finish.soline')" fixed="left"  show-overflow-tooltip width="120">
						<template #default="scope">
							<el-tag type="success">
									{{ scope.row.soLine }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="dnCode" :label="$t('finish.dncode')" show-overflow-tooltip width="220"/>
					<el-table-column prop="barcode" :label="$t('finish.barcode')" show-overflow-tooltip width="200"/>
					<el-table-column prop="qty" :label="$t('finish.qty')" show-overflow-tooltip width="100">
						<template #default="scope">
							<el-tag type="primary">
									{{ scope.row.qty }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="materialCode" :label="$t('finish.materialcode')" show-overflow-tooltip width="130"/>
					<el-table-column prop="materialName" :label="$t('finish.materialname')" show-overflow-tooltip width="210"/>
					<el-table-column prop="materialSpec" :label="$t('finish.materialspec')" show-overflow-tooltip width="320"/>
					<el-table-column prop="boxPerPallet" :label="$t('finish.boxperpallet')" show-overflow-tooltip width="100"/>
					<el-table-column prop="pcsPerBox" :label="$t('finish.pcsperbox')" show-overflow-tooltip width="100"/>
					<el-table-column prop="deliveryDate" :label="$t('finish.deliverydate')" show-overflow-tooltip width="200"/>
					<el-table-column prop="operationUserName" :label="$t('finish.operuser')" show-overflow-tooltip width="120"/>
					<el-table-column prop="targetBillCode" :label="$t('finish.targetbill')" min-width="200" show-overflow-tooltip />
					<el-table-column prop="sendOutTime" :label="$t('finish.senddate')" show-overflow-tooltip width="200"/>
					<el-table-column prop="warehouseCode" :label="$t('finish.warehousecode')" show-overflow-tooltip width="90"/>
					<el-table-column prop="locationCode" :label="$t('finish.locationcode')" show-overflow-tooltip width="90"/>

          <el-table-column prop="isSuccess" :label="$t('finish.issuccess')" show-overflow-tooltip width="120" fixed="right">
            <template #default="scope">
              <!--根据不同的状态选择不同的颜色的tag-->
              <el-tag size="large" :type="scope.row.isSuccess === 'Y' ? 'success' : 'danger'">
                {{ scope.row.isSuccess }}
              </el-tag>
            </template>
          </el-table-column>

        </el-table>

        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {BasicTableProps, useTable} from '/@/hooks/table';
import {queryDeliveryDetail} from '/@/api/platform/report/finishoutstock';
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus'; // 导入ElMessage
import {useI18n} from 'vue-i18n';

const {t} = useI18n();
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
const sendoutdate = ref([endDate, today]);


const getYMD = (date: any) => {
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 yyyy-MM-dd 格式的字符串
  const formattedDate = `${year}-${month}-${day}`;

  return formattedDate;
};

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    StartSendOutDate: sendoutdate.value ? getYMD(sendoutdate.value[0]) : '',
    EndSendOutDate: sendoutdate.value ? getYMD(sendoutdate.value[1]) : '',
  },
  pageList: queryDeliveryDetail,
});

const {tableStyle, getDataList, sizeChangeHandle, currentChangeHandle} = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  state.queryForm.barcode = null;
  queryRef.value?.resetFields();
  sendoutdate.value = ''; // 重置日期选择器
  state.queryForm.StartSendOutDate = '';
  state.queryForm.EndSendOutDate = '';
  getDataList(false);
};


const query = () => {

  if (!sendoutdate.value || !sendoutdate.value[0]) {
    ElMessage.error(t("finish.mustdae")); // 使用Element Plus的message组件提示用户
    return; // 如果开始时间未选，则不继续执行后续逻辑
  }

  state.queryForm.StartSendOutDate = sendoutdate.value ? getYMD(sendoutdate.value[0]) : '';
  state.queryForm.EndSendOutDate = sendoutdate.value ? getYMD(sendoutdate.value[1]) : '';
  getDataList();

};

</script>
